<template>
  <div v-loading="boxLoading" class="dialog-box" element-loading-background="rgba(0, 0, 0, 0.8)"
       element-loading-spinner="el-icon-loading" element-loading-text="正在加载...">
    <div class="box-content" style="width: 409px">
      <div class="content-header">
        <span>点云数据转换</span>
        <i class="el-icon-close" @click="$parent.pointCloudShow = false"></i>
      </div>
      <div class="content-body">
        <el-form>
          <div class="form-item-box">
            <div class="item-title">
              输入设置
            </div>
            <el-form-item label="输入设置">
              <el-input v-model="convertParameters.lasFileDir" disabled
                        placeholder="请选择输入文件夹" style="width: 217px"></el-input>
              <el-button type="primary" @click="openFolderSelect('input')">
                选择文件
              </el-button>
            </el-form-item>
            <el-form-item label="空间参考">
              <el-input v-model="srs" disabled placeholder="请输入空间参考"
                        style="width: 217px"></el-input>
              <el-button style="width:80px" type="primary" @click="coorSetShow = true">
                设置
              </el-button>
            </el-form-item>
            <el-form-item label="原点坐标">
              <el-input v-model="originPoint" placeholder="请输入原点坐标" style="width: 217px"></el-input>
            </el-form-item>
          </div>
          <div class="form-item-box">
            <div class="item-title">
              转换参数选项
            </div>
            <el-form-item label="抽稀密度">
              <el-input v-model="convertParameters.options.density" placeholder="请输入抽稀密度"></el-input>
            </el-form-item>
            <el-form-item label="最大层级">
              <el-input v-model="convertParameters.maxLevel" placeholder="请输入最大层级"></el-input>
            </el-form-item>
          </div>
          <div class="form-item-box">
            <div class="item-title">
              输出设置
            </div>
            <el-form-item label="输出路径">
              <el-input v-model="convertParameters.tilesDir" disabled
                        placeholder="请选择输出文件夹" style="width: 217px"></el-input>
              <el-button type="primary" @click="openFolderSelect('tilesDir')">
                选择路径
              </el-button>
            </el-form-item>
          </div>
          <!-- 模型转换日志 -->
          <transition enter-active-class="animate__animated animate__fadeInLeft animate__faster"
                      leave-active-class="animate__animated animate__fadeOutRight animate__faster">
            <div v-if="journalShow" class="journal-box form-item-box">
              <div class="conver-log">
                <div class="item-title">{{ convertTitle }}</div>
                <div ref="logBox" class="log-box">
                  <el-alert v-for="(item, index) in conversionLog" :key="index" :closable="false" :title="item.info"
                            :type="item.type"></el-alert>
                </div>
              </div>
            </div>
          </transition>
          <div class="form-item-box" style="border:none">
            <el-form-item class="submit-btn">
              <el-button v-if="conversionLog.length > 0" class="grey-hover-primary-button"
                         @click="journalShow = !journalShow">
                日志
              </el-button>
              <el-button :loading="confirmLoading" type="primary" @click="clickConfirmBtn">
                转换
              </el-button>
              <el-button class="grey-hover-grey-button" @click="$parent.pointCloudShow = false">关闭</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <coordinate-set v-if="coorSetShow" @close="coorSetShow = false" @confirm="coorConfirm"></coordinate-set>
  </div>
</template>

<script>
const os = window.require("os");
const {ipcRenderer} = window.require("electron");
import coordinateSet from '../components/coordinateSet.vue'

export default {
  name: "index",
  components: {coordinateSet},
  data() {
    return {
      confirmLoading: false,
      conversionLog: [],
      convertTitle: "转换中",
      journalShow: false,
      coorSetShow: false,
      boxLoading: false,
      originPoint: '',
      srs: '',
      proj: '',
      convertParameters: {
        lasFileDir: "",
        tilesDir: "",
        maxLevel: 24,
        options: {
          density: 1,
          rgbNormalizationMode: "LasDataRangeNormalization",
          isEllipsoid: false
        },
        threads: 0
      }
    }
  },
  watch: {
    conversionLog(val) {
      this.$nextTick(() => {
        if (this.$refs.logBox) {
          this.$refs.logBox.scrollTo(0, this.$refs.logBox.scrollHeight);
        }
      });
    },
  },
  methods: {
    /**
     * 打开文件夹选择对话框，并根据选择的文件夹进行后续操作。
     * @param {string} type - 类型标识，用于区分选择文件夹后的处理方式。
     */
    openFolderSelect(type) {
      const option = {
        title: `选择文件夹`,
        buttonLabel: "确定",
        properties: ["openDirectory"],
      };
      ipcRenderer.send("open-directory-dialog", option);
      ipcRenderer.once("open-directory-dialog", (event, data) => {
        this.convertParameters[type === 'input' ? 'lasFileDir' : 'tilesDir'] = data.folderPath;
      });
    },
    clickConfirmBtn() {
      let convertOptions = JSON.parse(JSON.stringify(this.convertParameters))
      if (this.proj && this.originPoint) {
        let points = this.originPoint.split(',')
        let coordinateChangeOptions = {
          originPointX: points[0],
          originPointY: points[1],
          originPointH: points[2],
          proj: this.proj
        }
        convertOptions.coordinateChangeOptions = coordinateChangeOptions
      }
      this.confirmLoading = true;
      this.boxLoading = true;
      this.journalShow = true
      this.conversionLog = [];
      this.convertTitle = "转换中";
      let option = {
        exeName: 'lastotiles',
        configName: 'Config',
        config: JSON.stringify(convertOptions)
      }
      ipcRenderer.send("spawn-exe", option);
      ipcRenderer.on("spawn-exe", this.ipcListenOn);
    },
    /**
     * 监听 IPC 消息
     *
     * @param event IPC 事件名
     * @param data 接收到的数据
     */
    ipcListenOn(_, data) {
      this.boxLoading = false;
      if (typeof data === "string") {
        ipcRenderer.off("spawn-exe", this.ipcListenOn);
        this.convertTitle = "日志";
        this.confirmLoading = false;
      } else {
        this.conversionLog.push(data);
      }
    },
    coorConfirm(data) {
      this.coorSetShow = false
      this.srs = data.epsg
      this.proj = data.proj
    }
  },
  mounted() {
    let maxThread = 0
    if (process.env.NODE_ENV === "development") {
      maxThread = 4;
    } else {
      maxThread = os.cpus().length;
    }
    this.convertParameters.threads = maxThread;
  }
}
</script>

<style lang="less" scoped>

</style>